<template>
    <div class="entity-basic">
        <h3>Entity基础绘制</h3>
        <div class="entity-info">
            <p><strong>说明：</strong>Entity API是高级别API，提供一致易用的接口</p>
            <p>Entity封装了Primitive，提供灵活高性能的可视化能力</p>
        </div>
        <div class="entity-controls">
            <button @click="drawPoint" class="draw-btn">绘制点</button>
            <button @click="drawEllipse" class="draw-btn">绘制椭圆</button>
            <button @click="drawBox" class="draw-btn">绘制立方体</button>
            <button @click="drawCylinder" class="draw-btn">绘制圆柱体</button>
            <button @click="drawPolygon" class="draw-btn">绘制多边形</button>
            <button @click="drawPolyline" class="draw-btn">绘制折线</button>
            <button @click="clearEntities" class="clear-btn">清除所有</button>
        </div>
        <div class="entity-status">
            <p v-if="entityCount > 0">已绘制 {{ entityCount }} 个Entity</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted } from 'vue';
import { XbsjEarthUi } from '../../../../scripts/xbsjEarthUi';
import EntityManager from './entityManager';

const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi;
const entityCount = ref(0);
const entityManager = EntityManager.getInstance();

// 获取EarthUI中的Cesium原生Viewer实例
const getCesiumViewer = () => {
    return xbsjEarthUi.activeViewer?.innerViewer?.viewer;
};

// 绘制点Entity
const drawPoint = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        const entity = viewer.entities.add({
            name: "Yellow Point",
            position: (window as any).Cesium.Cartesian3.fromDegrees(116.0, 40.0), // 北京
            point: {
                pixelSize: 10,
                color: (window as any).Cesium.Color.YELLOW
            },
        });
        entityManager.addEntity(entity); // 添加到全局管理器
        entityCount.value++;
        console.log('点Entity绘制成功');
    } catch (error) {
        console.error('绘制点Entity失败:', error);
    }
};

// 绘制椭圆Entity
const drawEllipse = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        const entity = viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(121.0, 31.0), // 上海
            name: 'Red ellipse on surface with outline',
            ellipse: {
                semiMinorAxis: 250000.0,
                semiMajorAxis: 400000.0,
                height: 200000.0,
                extrudedHeight: 400000.0,
                fill: true,
                material: (window as any).Cesium.Color.RED.withAlpha(0.5),
                outline: true,
                outlineColor: (window as any).Cesium.Color.BLUE.withAlpha(0.5),
                outlineWidth: 10.0
            }
        });
        entityManager.addEntity(entity); // 添加到全局管理器
        entityCount.value++;
        console.log('椭圆Entity绘制成功');
    } catch (error) {
        console.error('绘制椭圆Entity失败:', error);
    }
};

// 绘制立方体Entity
const drawBox = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        const entity = viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(113.0, 23.0), // 广州
            name: 'Box Entity',
            box: {
                dimensions: new (window as any).Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                material: (window as any).Cesium.Color.CYAN.withAlpha(0.7),
                outline: true,
                outlineColor: (window as any).Cesium.Color.BLACK
            }
        });
        entityManager.addEntity(entity); // 添加到全局管理器
        entityCount.value++;
        console.log('立方体Entity绘制成功');
    } catch (error) {
        console.error('绘制立方体Entity失败:', error);
    }
};

// 绘制圆柱体Entity
const drawCylinder = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        const entity = viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(104.0, 30.0), // 成都
            name: 'Cylinder Entity',
            cylinder: {
                length: 400000.0,
                topRadius: 200000.0,
                bottomRadius: 200000.0,
                material: (window as any).Cesium.Color.GREEN.withAlpha(0.8),
                outline: true,
                outlineColor: (window as any).Cesium.Color.DARKGREEN
            }
        });
        entityManager.addEntity(entity); // 添加到全局管理器
        entityCount.value++;
        console.log('圆柱体Entity绘制成功');
    } catch (error) {
        console.error('绘制圆柱体Entity失败:', error);
    }
};

// 绘制多边形Entity
const drawPolygon = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        const entity = viewer.entities.add({
            name: 'Polygon Entity',
            polygon: {
                hierarchy: (window as any).Cesium.Cartesian3.fromDegreesArray([
                    108.0, 34.0, // 西安
                    109.0, 34.0,
                    109.0, 35.0,
                    108.0, 35.0
                ]),
                material: (window as any).Cesium.Color.PURPLE.withAlpha(0.6),
                outline: true,
                outlineColor: (window as any).Cesium.Color.MAGENTA,
                height: 100000.0,
                extrudedHeight: 200000.0
            }
        });
        entityManager.addEntity(entity); // 添加到全局管理器
        entityCount.value++;
        console.log('多边形Entity绘制成功');
    } catch (error) {
        console.error('绘制多边形Entity失败:', error);
    }
};

// 绘制折线Entity
const drawPolyline = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        const entity = viewer.entities.add({
            name: 'Polyline Entity',
            polyline: {
                positions: (window as any).Cesium.Cartesian3.fromDegreesArray([
                    120.0, 30.0, // 杭州
                    120.5, 30.5,
                    121.0, 31.0,
                    121.5, 31.5,
                    122.0, 32.0
                ]),
                width: 5,
                material: (window as any).Cesium.Color.ORANGE,
                clampToGround: true
            }
        });
        entityManager.addEntity(entity); // 添加到全局管理器
        entityCount.value++;
        console.log('折线Entity绘制成功');
    } catch (error) {
        console.error('绘制折线Entity失败:', error);
    }
};

// 清除所有Entity
const clearEntities = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        // 只清除全局管理器中的Entity
        entityManager.clearAllEntities(viewer);
        entityCount.value = 0;
        console.log('Entity基础绘制已清除');
    } catch (error) {
        console.error('清除Entity失败:', error);
    }
};

onMounted(() => {
    // 组件加载时检查现有Entity数量
    const viewer = getCesiumViewer() as any;
    if (viewer) {
        entityCount.value = viewer.entities.values.length;
    }
});
</script>

<style scoped>
.entity-basic {
    width: 280px;
    box-sizing: border-box;
    padding: 10px;
}

.entity-info {
    box-sizing: border-box;
    font-size: 14px;
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    margin-bottom: 15px;
}

.entity-controls {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.draw-btn, .clear-btn {
    margin-bottom: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.draw-btn {
    background-color: #9C27B0;
    color: white;
}

.draw-btn:hover {
    background-color: #7B1FA2;
}

.clear-btn {
    background-color: #f44336;
    color: white;
}

.clear-btn:hover {
    background-color: #d32f2f;
}

.entity-status {
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    border-left: 4px solid #9C27B0;
    color: #9C27B0;
    font-weight: bold;
}
</style>
